<template>
  <div class="warp-box" id="hetong-list">
    <el-row class="search-box" :gutter="10">
      <el-col :span="20">
        <el-input
          clearable
          style="width:200px"
          v-model="parames.customerName"
          size="small"
          placeholder="搜索公司名称"
        ></el-input>
        <el-select clearable style="width:180px" size="small" @change="search"  v-model="parames.contractStatus" placeholder="合同状态">
            <el-option v-for="(item,index) in contractStatusData" :key="index" :label="item.desc" :value="item.name"></el-option>
        </el-select>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="text" icon="el-icon-s-open" @click="handleSearch">高级搜索</el-button>
      </el-col>
    </el-row>
    <el-row class="main-box channel1234" style="margin:10px -5px;">
      <el-col :span="24">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd" v-if="newBtn">新建合同</el-button>
        <el-button size="small" icon="el-icon-download" @click="handleExport" v-if="daochuBtn">导出</el-button>
      </el-col>
      <el-col :span="24">
          <el-row style="border-bottom:#f4f4f4 solid 1px;color:#000;line-height:42px;margin-top:15px">
            <el-col :span="14">合同详情</el-col>
            <el-col :span="4">金额</el-col>
            <el-col :span="4">状态</el-col>
            <el-col :span="2">操作</el-col>
          </el-row>
          <div style="overflow-y:auto;height:500px" v-loading="loading">
            <el-row v-for="(item,index) in tableData" :key="index" style="margin-bottom:20px;">
                <el-col :span="24" style="background: #f9f9f9;padding:14px;border:#f4f4f4 solid 1px;">
                  <span>{{item.createDate | formatDate}}</span>
                  <span style="margin-left: 10px">【{{item.renew?'续签':'新签'}}】合同流水号:</span>
                  <span style="margin-left: 10px;color:#409EFF;cursor:pointer" @click="handleRow(item)">{{item.id}}</span>
                  <span style="margin-left: 5px" >合同编号：{{item.contractNumber}}</span>
                </el-col>
                <el-col :span="24">
                  <el-row style="line-height:42px;background:#f9f9f9;border:#f4f4f4 solid 1px;color:#000">
                    <el-col :span="5" >
                      <p class="ellisps" style="padding-right:30px;margin-left:14px;color:#409EFF;cursor:pointer" @click="handleOpenCustomer(item.customerId)">公司名称：{{item.customerName}}</p>
                    </el-col>
                    <el-col :span="4">合同来源：{{item.contractSource}}</el-col>
                    <el-col :span="5">销售代表：{{item.seller}}(工号:{{item.sellerWorkNumber}})</el-col>
                    <el-col :span="4">合计：{{item.totalPrice}}</el-col>
                    <el-col :span="4" v-if="item.contractStatus">{{item.contractStatus.desc}}</el-col>
                    <el-col :span="2"><el-button size="mini" type="text" icon="el-icon-search" @click="handleRow(item)"></el-button></el-col>
                  </el-row>
                </el-col>
                <el-col  :span="24" style="border:#f4f4f4 solid 1px;line-height:40px;cursor:pointer">
                  <el-row class="jz-hover" v-for="(items,key) in item.contractProductList" :key="key">
                    <el-col :span="9">
                      <p style="margin-left:14px">{{items.productName}}</p>
                    </el-col>
                    <el-col :span="5" v-if="items.productUnit">{{items.count}}{{items.productUnit.desc}}</el-col>
                    <el-col :span="4">{{items.totalPrice}}</el-col>
                    <el-col :span="4" v-if="items.paymentStatus">{{items.paymentStatus.desc}}</el-col>
                    <el-col :span="2">
                      <!-- <el-button size="mini" type="text" icon="el-icon-search" ></el-button> -->
                    </el-col>
                  </el-row>
                </el-col>
            </el-row>
          </div>
      </el-col>
      <el-col :span="24">
        <pages :parames="parames" @render="checkPage"></pages>
      </el-col>
    </el-row>
    <createdContractDialog :dialogData="dialogData" @checkRender="getList"></createdContractDialog>
    <searchDialog :searchData="searchData" @checkSearch="checkSearch" @resetSearch="resetSearch"></searchDialog>
    <contractDetailDialog :detailData="detailData" @checkRender="getData"></contractDetailDialog>
    <customerDetailDialog :detailData="customerDetailData"></customerDetailDialog>
  </div>
</template>

<script>
import createdContractDialog from "./createdContractDialog.vue"; //新建合同
import searchDialog from "./opportSearchDialog.vue"; //高级搜索弹窗
import contractDetailDialog from "./contractDetailDialog.vue"; //合同详情弹窗
import customerDetailDialog from "../customerManage/opportDetailDialog.vue"; //客户详情弹窗

export default {
  props: ['type'],
  data() {
    return {
      loading: false,
      parames: {
        tabKey: this.type,
        page: 1, //页码index
        limit: 10, //页码最大
        customerName: '', //联系人名称
        contractStatus: '', //合同状态
        totalCount: 0,
        search: []
      },
      contractStatusData:[],
      dialogData: {
        //新建弹窗
        type: 'new',
        show: false
      },
      searchData: {
        //搜索弹窗
        show: false
      },
      detailData: { //合同详情弹窗
        id: '',
        show: false
      },
      customerDetailData: { //客户弹窗
        id: '',
        show: false
      },
      daochuBtn: false,
      newBtn: false,
      total: 100,
      pagelimit: 10,
      pageindex: 1,
      tableData: []
    };
  },
  components: {
    createdContractDialog,
    searchDialog,
    contractDetailDialog,
    customerDetailDialog
  },
  methods: {
    search() {
      //查询
      this.parames.page = 1;
      let searchDate = this.parames.search
      let n = 0
      this.parames.search.forEach(el=>{
        if (el.key == 'customerName') {
          n = 1
        }
      })
      if (this.parames.customerName && n == 0) {
        this.parames.search.push({
          key: 'customerName',
          value: this.parames.customerName,
          type: 'string'
        })
      } else if (this.parames.customerName && n == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'customerName') {
            el.value = this.parames.customerName
          }
        })
      } else if (!this.parames.customerName && n == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'customerName') {
            this.parames.search.splice(index,1)
          }
        })
      }

      let b = 0
      this.parames.search.forEach(el=>{
        if (el.key == 'contractStatus') {
          b = 1
        }
      })
      if (this.parames.contractStatus && b == 0) {
        this.parames.search.push({
          key: 'contractStatus',
          value: this.parames.contractStatus,
          type: 'enumeration'
        })
      } else if (this.parames.contractStatus && b == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'contractStatus') {
            el.value = this.parames.contractStatus
          }
        })
      } else if (!this.parames.contractStatus && b == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'contractStatus') {
            this.parames.search.splice(index,1)
          }
        })
      }
      this.getList()
    },
    handleSearch() {
      //打开高级搜索弹窗
      this.searchData.customerName = this.parames.customerName
      this.searchData.contractStatus = this.parames.contractStatus
      this.searchData.show = true;
    },
    resetSearch () {
      this.parames.customerName = ''
      this.parames.contractStatus = ''
    },
    checkSearch (value,type) {
      this.parames.search = value
      value.forEach(el=>{
        if(el.key == 'customerName') {
          this.parames.customerName = el.value
        }
        if(el.key == 'contractStatus') {
          this.parames.contractStatus = el.value
        }
      })
      this.parames.page = 1
      this.getList()
    },
    checkPage () {
      this.getList()
    },
    handleAdd() { //新建
      this.dialogData.type = 'new';
      this.dialogData.title = '新建合同'
      this.dialogData.show = true;
    },
    getData () {
      this.$post(this.$api.postContactList,this.parames).then(response => {
        if (response.data.succeed) {
            let data = response.data.data
            data.forEach(el=>{
              el.totalPrice = 0
              el.contractProductList.forEach(bl=>{
                el.totalPrice += bl.totalPrice
              })
            })
            this.parames.totalCount = response.data.totalCount
            this.tableData = data
        }
        setTimeout(() => {
          this.loading = false
        }, 200);
      })
    },
    handleExport () {
      var search = ''
      if (this.parames.search.length>0) {
        search = encodeURIComponent(JSON.stringify(this.parames.search).toString())
      }
      window.location.href = this.$api.postContactExport+'?userId=' + this.$utils.getLocalStorage('user').id+'&tabKey=' + this.type + '&search=' + search
    },
    getList () { //获取页面数据
      this.loading = true
      this.getData()
    },
    handleRow(row) { //点击某一行数据打开合同详情
      this.detailData.id = row.id;
      this.detailData.show = true;
    },
    handleOpenCustomer (id) { //点击客户打开客户详情
      this.customerDetailData.id = id;
      this.customerDetailData.show = true;
    },
    tableRowClassName({ row, rowIndex }) {
      //斑马表格
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    }
  },
  mounted () {
    let buttonLimit = this.$utils.getLocalStorage('buttonlist')  //按钮缓存
    this.$utils.getEnumberation('postContractStatus','contractStatusData',this) //合同状态
    if (buttonLimit.indexOf('k056') !== -1) {
      this.daochuBtn = true
    }
    if (buttonLimit.indexOf('k070') !== -1) {
      this.newBtn = true
    }
    this.getList()
  }
};
</script>

<style>
.el-table .warning-row {
  background: #f9f9f9;
}
.el-table .success-row {
  background: #fff;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.hetong-header .el-table__empty-block{
  display: none;
}
#hetong-list .el-table tbody tr:hover>td { 
    background-color:#fff!important
}
.jz-hover:hover{
  background: #e8f7fe
}
</style>